<template>
  <div class="cards">
    <el-card>
      <!-- inline : 代表的是行内表单,代表一行可以放置多个表单元素 -->
      <!-- model : 表单数据对象,配合v-model使用,表示要检验的对象 -->
      <el-form :inline="true" :model="cForm">
        <el-form-item label="一级分类">
          <el-select v-model="cForm.category1Id" :disabled="show" placeholder="请选择" @change="handler1">
            <el-option v-for="c1 in category1" :key="c1.id" :label="c1.name" :value="c1.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类">
          <el-select v-model="cForm.category2Id" :disabled="show" placeholder="请选择" @change="handler2">
            <el-option v-for="c2 in category2" :key="c2.id" :label="c2.name" :value="c2.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="三级分类">
          <el-select v-model="cForm.category3Id" :disabled="show" placeholder="请选择" @change="handler3">
            <el-option v-for="c3 in category3" :key="c3.id" :label="c3.name" :value="c3.id" />
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'CategorySelect',
  props: ['show'],
  data() {
    return {
      // 一级分类数组
      category1: [],
      // 二级分类数组
      category2: [],
      // 三级分类数组
      category3: [],
      // 收集相应的一级二级三级分类的id
      cForm: {
        category1Id: '',
        category2Id: '',
        category3Id: '',
      },
    }
  },
  // 该组件内获取的是各级小分类数据,大的数据获取在父组件那边获取
  // 组件挂载完毕,向服务器发请求,获取相应的一级分类数据
  mounted() {
    // 获取一级分类的数据的方法
    this.getCategory1List()
  },
  methods: {
    // 获取一级分类的数据的方法
    async getCategory1List() {
      const res = await this.$api.attr.reqCategory1()
      console.log(res, '一级分类数据')
      try {
        this.category1 = res.data
      } catch (error) {
        console.log(error)
      }
    },
    // 一级分类的select事件回调(当一级分类的option发生变化的时候获取相应二级分类的数据)
    async handler1() {
      // 结构出一级分类的 id
      const { category1Id } = this.cForm
      // 当用户第二次重新选择一级分类时,二三级残留数组和id应该被清除掉
      this.category2 = []
      this.category3 = []
      this.cForm.category2Id = ''
      this.cForm.category3Id = ''
      // 传递 id 给父组件(拿来发送请求使用)
      this.$emit('getCategoryId', { id: category1Id, level: 1 })
      // 通过一级分类的 id,获取二级分类的数据
      const res = await this.$api.attr.reqCategory2(category1Id)
      console.log(res, '二级分类数据')
      if (res.code === 200) {
        this.category2 = res.data
      }
    },
    // 二级分类的select事件回调(当二级分类的option发生变化的时候获取相应三级分类的数据)
    async handler2() {
      // 解构
      const { category2Id } = this.cForm
      // 当用户第二次重新选择二级分类时,二级残留数组和id应该被清除掉
      this.category3 = []
      this.cForm.category3Id = ''
      // 传递 id 给父组件(拿来发送请求使用)
      this.$emit('getCategoryId', { id: category2Id, level: 2 })
      const res = await this.$api.attr.reqCategory3(category2Id)
      console.log(res, '三级分类数据')
      if (res.code === 200) {
        this.category3 = res.data
      }
    },
    // 三级分类的select事件回调(发送请求拿数据)
    handler3() {
      const { category3Id } = this.cForm
      // 传递 id 给父组件(拿来发送请求使用)
      this.$emit('getCategoryId', { id: category3Id, level: 3 })
    },
  },
}
</script>

<style scoped>
.cards {
  margin-bottom: 20px;
}
</style>
